<template>
	<div class="pg-page thePage">
		<div class="title flex-align b-line-half">
			<div>标题：</div>
			<cube-input class="flex-1" v-model="title"></cube-input>
		</div>
		
		<div class="dtUpdate flex-align b-line-half" @click="showDateTimePicker">
			<div>时间：</div>
			<cube-input class="flex-1" v-model="dtUpdate" disabled ></cube-input>
		</div>
		

		<div class="contentlabel ">主要内容:</div>
		<cube-textarea class="content" v-model="content" :maxlength="2000" autoExpand></cube-textarea>

		<div class="btns-bottom flex-align">
			<div class="btn-delete" @click="onDelete"><i class="iconfont icon-shanchuwenjian"></i></div>
			<div class="btn-add" @click="onAdd"><i class="iconfont icon-jiahao"></i></div>
		</div>
		<div class="tips">【附件请从电脑端上传】</div>
		<div class="btn-confirm " @click="onSubmit">发布</div>
		
		<!-- 弹窗 -->
		<dialog-confirm 
			:visible="visiblePopup" 
			btnText="返回" 
			content="已保存发布" 
			:onConfirm="handleConfirm">
		</dialog-confirm>	
		
	</div>
</template>

<script>
import DialogConfirm from '@/components/DialogConfirm.vue'
const dayjs = require('dayjs')
export default {
	name: 'ConsultEdit',
	components: {
		DialogConfirm
	},
	data() {
		return {
			visiblePopup: false, //提交确认弹窗显示
			title: '9.19日事宜',
			content:
				'今日13：20办公室内容会议简要。2020年七月十七日上午，在主办公室召开关于顶岗实习项目的讨论及研发方向。此次会议由梁高管召开，与设计人员，前端研发人员进行了讨论，并确定了方向...',
			dtUpdate: '2020-07-02',
			publisher: '宁波创艺信息科技有限公司'
		};
	},

	methods: {
		showDateTimePicker() {
			if (!this.dateTimePicker) {
				this.dateTimePicker = this.$createDatePicker({
					title: '选择日期时间',
					min: new Date(2008, 7, 8, 8, 0, 0),
					max: new Date(2020, 9, 20, 20, 59, 59),
					value: new Date(),
					columnCount: 6,
					onSelect: this.handleSelectDateTime
				});
			}

			this.dateTimePicker.show();
		},
		handleSelectDateTime(date, selectedVal, selectedText) {		
			this.dtUpdate = dayjs(date).format('YYYY-MM-DD') // '2019-09-07'
		},
		onDelete() {
			console.log('onDelete');
		},

		onAdd() {
			console.log('onAdd');
		},

		onSubmit() {
			this.visiblePopup = true
		},
		
		//处理弹框确认按钮回调
		handleConfirm(){
			this.visiblePopup=false;
			this.$router.push({name:"consultList"})
		},
	}
};
</script>

<style lang="less" scoped>
.pg-page {
	margin: 20px;
	background-color: white;
	font-family: SourceHanSansCN;
	font-size: 12px;	

	.title,
	.dtUpdate {
		font-size: 15px;
		font-weight: 500;
		color: #3a3a3a;
		line-height: 36px;
		&/deep/.cube-input::after {
			border: none;
		}
	}	
	
	.contentlabel {
		padding-top: 20px;
		font-size: 18px;
		font-weight: bold;
		color: #3a3a3a;
		line-height: 24px;
	}

	.content {
		margin: 10px 0;
		height: 300px;
		
	}

	.btns-bottom {
		margin-top: 20px;
		color: white;
		line-height: 84px;
		text-align: center;
		.btn-delete {
			width: 84px;
			height: 84px;
			background: #ffcb5e;
			border-radius: 10px;
			.iconfont {
				font-size: 64px;
			}
		}
		.btn-add {
			margin: 0 20px;
			width: 84px;
			height: 84px;
			background: #ffcb5e;
			border-radius: 10px;
			line-height: 84px;
			.iconfont {
				font-size: 64px;
			}
		}
	}
}
.btn-confirm {
	margin-top: 40px;
}
</style>
